<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>购物车</title>
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/demo.js"></script>
  </head>

  <body>
    <div id="content">
      <table id="cartTable">
        <thead>
          <tr>
            <th>
              <label
                ><input
                  class="check-all check"
                  type="checkbox"
                />&nbsp;全选</label
              >
            </th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/cake1.webp" alt="" /><span>半熟芝士</span>
            </td>
            <td class="price">50.00</td>
            <td class="count">
              <span class="reduce"></span>
              <input class="count-input" type="text" value="1" />
              <span class="add">+</span>
            </td>
            <td class="subtotal">50.00</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/cake2.webp" alt="" /><span>马卡龙</span>
            </td>
            <td class="price">20</td>
            <td class="count">
              <span class="reduce"></span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">20</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/cake3.webp" alt="" /><span>草莓蛋糕</span>
            </td>
            <td class="price">99.99</td>
            <td class="count">
              <span class="reduce"></span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">99.99</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/cake4.webp" alt="" /><span>蛋黄酥</span>
            </td>
            <td class="price">15.00</td>
            <td class="count">
              <span class="reduce"></span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">15.00</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
        </tbody>
      </table>

      <div class="foot" id="foot">
        <label class="fl select-all"
          ><input type="checkbox" class="check-all check" />&nbsp;全选</label
        >
        <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing">结 算</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">
          已选商品 <span id="selectedTotal">0</span>件
          <span class="arrow up">︽</span>
          <span class="arrow down">︾</span>
        </div>
        <div class="selected-view">
          <div id="selectedViewList" class="clearfix"></div>
          <span class="arrow">◆<span>◆</span></span>
        </div>
      </div>
    </div>
  </body>
</html>
